<template>
  <div class="probigbox">
    <!-- 搜索栏盒子 -->
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect 
                      ref="yonghu" 
                      :optionlist="yonghulist" 
                      :valuekey="{name:'name',value:'id'}"
                      @changeselect="changeqite"
                      :defaultvalue="companyId"
                      ></FilterSelect>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="级别">
                  <el-select v-model="level" placeholder="请选择级别"  size="small" style="width:100%;">
                    <el-option v-for="(item,index) in jibielist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="14" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="getdatalist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <!-- 盒子主体 -->
    <div class="bodybox">
      <!-- 导出部分 -->
      <div class="top">
        <div>产品维护</div>
        <div class="butti">
          <span><el-button type="primary" size="small" @click="addlist"><i class="el-icon-plus"></i>新增产品</el-button></span>
          <TopTooltip @command="command"  @shuaxin="shuaxin"></TopTooltip>
        </div>
      </div>
      <!-- table表格 -->
      <div class="table">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        <el-table-column type="expand">
              <template slot-scope="props">
                <div style="padding: 10px 10px 10px 30px;background-color: #f2f8ff;">
                  <el-table
                   border
                  :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
                  :data="props.row.childList"
                  style="width: 100%">
                  <el-table-column
                      label="用电企业"
                      prop="companyName">
                    </el-table-column>
                    <el-table-column
                      label="产品级别"
                      prop="levelName">
                    </el-table-column>
                    <el-table-column
                      label="上级产品名称"
                      prop="parentName">
                    </el-table-column>
                    <el-table-column
                      label="产品名称"
                      prop="name">
                    </el-table-column>
                    <el-table-column
                      label="产品单位"
                      prop="unit">
                    </el-table-column>
                    <el-table-column
                      label="维护日期"
                      align="center"
                      prop="createDate">
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="用电企业"
              prop="companyName">
            </el-table-column>
            <el-table-column
              label="产品级别"
              prop="levelName">
            </el-table-column>
            <el-table-column
              label="上级产品名称"
              prop="parentName">
            </el-table-column>
            <el-table-column
              label="产品名称"
              prop="name">
            </el-table-column>
            <el-table-column
              label="产品单位"
              prop="unit">
            </el-table-column>
            <el-table-column
              label="维护日期"
              align="center"
              prop="createDate">
            </el-table-column>
        <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="150">
            <template #default="{row}">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                <i @click="update(row)" class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;"></i>
               </el-tooltip>
               <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i @click="del(row)" class="el-icon-delete" style="color: red;cursor: pointer;"></i>
               </el-tooltip>
            </template>
          </el-table-column>
        </TableColumn>
          <!-- 底部分页 -->
          <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="15"
                @current-change="getdatalist"
                :total="+totalCount">
          </el-pagination>
        </div>
      </div>
      <!-- dialog新增/修改弹窗 -->
      <div>
        <el-dialog
          title="产品信息"
          :visible.sync="dialogVisible"
          width="35%">
          <div>
            <el-form ref="form" :model="form" label-width="80px">
               <el-row>
                 <el-col :span="24">
                   <el-form-item label="用电企业" prop="companyId">
                    <el-select v-model="form.companyId" placeholder="请选择用电单位"  size="small" style="width: 100%;">
                      <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                    </el-select>
                   </el-form-item> 
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="24">
                   <el-form-item label="产品级别" prop="level">
                    <el-select v-model="form.level" placeholder="请选择产品级别"  size="small" style="width: 100%;" @change="changetype">
                      <el-option v-for="(item,index) in jibielist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                    </el-select>
                   </el-form-item> 
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="24">
                   <el-form-item label="上级产品" prop="parentId">
                    <el-select v-model="form.parentId" placeholder="请选择上级产品"  size="small" style="width: 100%;">
                      <el-option v-for="(item,index) in parentlist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                    </el-select>
                   </el-form-item> 
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="24">
                   <el-form-item label="产品名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入产品名称"  size="small" style="width: 100%;"></el-input>
                   </el-form-item> 
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="24">
                   <el-form-item label="产品单位" prop="unit">
                    <el-input v-model="form.unit" placeholder="请输入产品单位"  size="small" style="width: 100%;"></el-input>
                   </el-form-item> 
                 </el-col>
               </el-row>
               <el-row>
                 <el-col :span="24">
                   <el-form-item label="维护日期" prop="createDate">
                    <el-date-picker v-model="form.createDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" style="width: 100%;" size="small"></el-date-picker>
                   </el-form-item> 
                 </el-col>
               </el-row>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="quxiao" size="small">取 消</el-button>
            <el-button type="primary" @click="submit" size="small">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import FilterSelect from '@/components/FilterSelect'
import {getzidianxialaapi} from '@/api/guidelines'
import {getprodatalistapi,postaddprolistapi,postupdatelistapi,postdeletelistapi} from '@/api/energy-consumption/Allocation-Administration/product'
import TopTooltip from '@/components/TopTooltip/index.vue'
import TableColumn from '@/components/Table/index.vue'
import {getyongdianlistapi} from '@/api/energy-consumption/Basic-information/medium'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTooltip,
    TableColumn,
    FilterSelect
  },
  data() {
    return {
      form: {level:'',parentId:''},
      level:'',
      companyId: '',
      yonghulist: [],
      dialogVisible: false,
      issize: 'medium',
      tableData: [],
      tableConfig: [],
      totalCount: '',
      pageobj: {
        pageNo: 0,
        pageSize:15
      },
      jibielist: [],
      parentlist:[]
    };
  },

  async mounted() {
    // 获取用电单位
    const {data:{list}} = await getyongdianlistapi()
    this.yonghulist = list
    const companyId = localStorage.getItem('companyId')
    this.$set(this,'companyId',companyId?+companyId:'')
    // 获取收费类型
    const jibie = await getzidianxialaapi({ dictType: 'EnergyProductLevel' })
    this.jibielist = jibie.data.list
    this.getdatalist()
  },

  methods: {
    changeqite(val) {
      this.$set(this,'companyId',val)
      localStorage.setItem('companyId', val)
    },
    // 提交
    async submit() {
      this.form.id? await postupdatelistapi(this.form).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'修改成功':res.message
        })
      }):
      await postaddprolistapi(this.form).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'新增成功':res.message
        })
      })
      this.quxiao()
      this.getdatalist()
    },
    // 弹窗取消
    quxiao() {
      // this.$refs.form.resetFields()
      this.form={level:'',parentId:''}
      this.dialogVisible = false
    },
    // 新增
    addlist() {
      this.dialogVisible = true
      this.gettime()
      this.$set(this.form, 'companyId', this.companyId)
    },
    // 重置
    chongzhi() {
      this.level = ''
      this.companyId = ''
      this.getdatalist()
    },
    // 获取表格数据
    async getdatalist() {
      this.$refs.tabledata.loading=true
      const { data: { list,totalCount } } = await getprodatalistapi({
        pageNo: this.pageobj.pageNo - 1,level:this.level,
        pageSize: this.pageobj.pageSize,companyId:this.companyId,
      })
      this.totalCount = totalCount
      this.tableData = list
      this.$refs.tabledata.loading=false
    },
    // 级别下拉
    async changetype(val,flag) {
      const selectedIndex = this.jibielist.findIndex(item => item.value === val);
      let prevItem=''
        if (selectedIndex > 0) {
           prevItem = this.jibielist[selectedIndex - 1];
      }
      if(!prevItem) return this.parentlist=[]
      const { data: { list } } = await getprodatalistapi({
        pageNo: this.pageobj.pageNo - 1,level:prevItem.value,
        pageSize: 100,companyId:this.form.companyId,
      })
      this.parentlist = list
      if(!flag) this.form.parentId=''
    },
    // 编辑
    async update(val) {
      this.dialogVisible = true
      const {parentId,...obj}=val
      this.form = obj
      await this.changetype(val.level, true)
      this.$set(this.form,'parentId',val.parentId)
    },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await postdeletelistapi({ id: row.id }).then(res => {
            this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message:res.code=='200'?'删除成功':res.message
            })
          })
          this.getdatalist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 列表刷新
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.$set(this.form,'createDate',year+'-'+month+'-'+day+' 00'+':'+'00'+':'+'00')
    },
  },
};
</script>

<style scoped>
.probigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    background-color: #fff;
    padding: 20px;
  }
  .bodybox{
    height: calc(100% - 90px);
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;
    .top{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .butti{
        display: flex;
        align-items: center;
      }
    }
    .table{
      height: 90%;
      .fenye{
        text-align: right;
        margin-top: 10px;
      }
    }
  }
}
::v-deep .el-dialog__footer{
  text-align: center;
}
::v-deep .el-form-item{
  margin-bottom: 10px;
}
::v-deep .el-table__expand-icon{
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 /*2.展开按钮未点击的样式是加号带边框*/
 ::v-deep .el-table__expand-icon .el-icon-arrow-right:before{
   content: "\e6d9";
   border: 1px solid #ccc;
   padding: 1px;
 }
  /*2.按钮已点击展开之后的样式是减号带边框*/
  ::v-deep .el-table__expand-icon--expanded .el-icon-arrow-right:before{
  content: "\e6d8";
}
::v-deep .el-table__expand-icon--expanded:hover {
  color: #409eff;
}
::v-deep .el-icon-arrow-right:hover {
  color: #409eff;
}
</style>